<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/jspf/must/basePath.jspf" %>
<!--后台UI组件Start-->
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script src="zj/jq/jquery-1.11.3.min.js" type="text/javascript"></script> 
        <link rel="stylesheet" type="text/css" href="dc_manager/base/food/js/foodUploader.css">
        <%@include file="/WEB-INF/jspf/zj/webuploader/w0_1_5.jspf" %>
        <script src="dc_manager/base/food/js/foodUploader.js" type="text/javascript"></script>
        <script>
 
            jQuery(function () {
                var $ = jQuery,
                        $list = $('#fileList'),
                        // 优化retina, 在retina下这个值是2
                        ratio = window.devicePixelRatio || 1,
                        // 缩略图大小
                        thumbnailWidth = 100 * ratio,
                        thumbnailHeight = 100 * ratio,
                        // Web Uploader实例
                        uploader;

                // 初始化Web Uploader
                uploader = WebUploader.create({
                    // 自动上传。
                    auto: true,
                    runtimeOrder: 'flash',
                    // swf文件路径
                    swf: 'zj/webuploader/Uploader.swf',
                    // 文件接收服务端。
                    server: 'weixinkeji/dev/dc/base/food/file/imgUpload.imy',
                    // 选择文件的按钮。可选。
                    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                    pick: '#filePicker',
                    // 只允许选择文件，可选。
                    accept: {
                        title: 'Images',
                        extensions: 'gif,jpg,jpeg,bmp,png',
                        mimeTypes: 'image/*'
                    }
                });

                // 当有文件添加进来的时候
                uploader.on('fileQueued', function (file) {
//        uploader.removeFile(uploader.getFiles()[0], true);
//        $("#fileList .info").remove();
//        $("#fileList img").remove();
//        $("#fileList div").remove();
                    var $li = $(
                            '<div id="' + file.id + '" class="file-item thumbnail">' +
                            '<img>' +
                            '<div class="info">' + file.name + '</div>' +
                            '</div>'
                            ),
                            $img = $li.find('img');
                    $list.append($li);

                    // 创建缩略图
                    uploader.makeThumb(file, function (error, src) {
                        if (error) {
                            $img.replaceWith('<span>不能预览</span>');
                            return;
                        }

                        $img.attr('src', src);
                    }, thumbnailWidth, thumbnailHeight);
                });
                // 文件上传过程中创建进度条实时显示。
                uploader.on('uploadProgress', function (file, percentage) {
                    var $li = $('#' + file.id),
                            $percent = $li.find('.progress span');

//        // 避免重复创建
//        if (!$percent.length) {
//            $percent = $('<p class="progress"><span></span></p>')
//                    .appendTo($li)
//                    .find('span');
//        }
                    $percent.css('width', percentage * 100 + '%');
                });

                // 文件上传成功，给item添加成功class, 用样式标记上传成功。
                uploader.on('uploadSuccess', function (file) {
                    alert("OK");
                    $('#' + file.id).addClass('upload-state-done');
                });
                uploader.addButton({
                    id: '#btnContainer',
                    innerHTML: '选择图片'
                });
                // 文件上传失败，现实上传出错。
                uploader.on('uploadError', function (file) {
                    var $li = $('#' + file.id),
                            $error = $li.find('div.error');

                    // 避免重复创建
                    if (!$error.length) {
                        $error = $('<div class="error"></div>').appendTo($li);
                    }
                    alert("eeror");
                    $error.text('上传失败');
                });

                // 完成上传完了，成功或者失败，先删除进度条。
                uploader.on('uploadComplete', function (file) {
                    $('#' + file.id).find('.progress').remove();
                });
            });
        </script>
    </head>
    <body>
        <!--dom结构部分-->
        <div id="uploader-demo">
            <!--用来存放item-->
            <div id="fileList" class="uploader-list"></div>
            <div id="btnContainer"></div>
            <button class="webuploader-pick" onclick="resetUpfile()" >取消上传</button>
        </div>
    </body>
</html>
